<template>
  <div class="componentsbox">
    <div class="loginbox">
      <div class="shangbox" v-if="!isLogin">
        <div class="userInfobox">
          <div class="touxiang">
            <img src="@/assets/images/touxiang.png" alt="">
          </div>
          <div class="wenzibox">
            <div class="timebox">
              {{ timeLabel?timeLabel +'好':''}}
            </div>
            <!-- <div class="regtext">注册</div> -->
          </div>
        </div>
        <div class="tips1">
          登录梯语云享更多优惠！
        </div>
        <div class="tips2">
          新人优惠券   分享分润   海量商品
        </div>
        <div style="display: flex;align-items: center;justify-content: center;">
          <el-button @click="loginit" class="loginbtn">立即登录</el-button>
        </div>
        
      </div>
      <div class="shangbox" v-else>
        <div class="userInfobox" >
          <div class="touxiang" @click="gopage('/personalCenter/setting','2-4')">
            <img :src="user.avatar?user.avatar:'@/assets/images/touxiang.png'"  alt="">
          </div>
          <div class="wenzibox" >
            <div class="timebox" @click="gopage('/personalCenter/setting','2-4')">
              {{user.name||'梯语云用户'}}
            </div>
            <div @click="loginweb" class="tuichutext">退出</div>
          </div>
        </div>
        <div class="btnsbox">
          <div class="btnitem" @click="gopage('/pagesCart?mode=cart')">
            <img src="@/assets/images/gouwuche.png" alt="">
            <span>购物车</span>
          </div>
          <div class="btnitem" @click="gopage('/personalCenter/discountCoupons','2-2')">
            <img src="@/assets/images/youhui.png" alt="">
            <span>优惠券</span>
          </div>
          <div class="btnitem" @click="gopage('/personalCenter/address','2-5')">
            <img src="@/assets/images/address.png" alt="">
            <span>收货地址</span>
          </div>
          <div class="btnitem" @click="gopage('/personalCenter/mymoney','2-1')">
            <img src="@/assets/images/fenrun.png" alt="">
            <span>我的分润</span>
          </div>
        </div>
        <div class="orderbox" >
          <div class="orderItem" @click="gopage('/personalCenter/myorder','1-1',1)">
            <div class="value">{{orderObj&&orderObj.dfkCount||0}}</div>
            <div class="wenzi">待支付</div>
          </div>
          <div class="orderItem" @click="gopage('/personalCenter/myorder','1-1',2)">
            <div class="value">{{orderObj&&orderObj.dfhCount||0}}</div>
            <div class="wenzi">待发货</div>
          </div>
          <div class="orderItem" @click="gopage('/personalCenter/myorder','1-1',3)">
            <div class="value">{{orderObj&&orderObj.dshCount||0}}</div>
            <div class="wenzi">待收货</div>
          </div>
          <div class="orderItem" @click="gopage('/personalCenter/myorder','1-1',4)">
            <div class="value">{{orderObj&&orderObj.shCount||0}}</div>
            <div class="wenzi">售后</div>
          </div>
        </div>
        <div class="orderAll" @click="gopage('/personalCenter/myorder','1-1')">
          <div class="zuoOrder">
            <span class="wenzi">我的订单</span>
            <span class="shuliang">（{{orderObj&&(orderObj.dfhCount+orderObj.dfkCount+orderObj.dshCount+orderObj.shCount)||0}}）</span>
          </div>
          <div class="jiantou">
            <img src="@/assets/images/jiantou.png" alt="">
          </div>
        </div>
      </div>
      
      <div class="youhuijuanbox" v-if="isLogin" @click="gopage('/alldiscountCoupons')">
        <div class="youhuijuanitem" v-for="(item,idnex) of coupslist" :key="idnex">
          <!-- <img src="@/assets/images/youhuijuan.png" alt=""> -->
          <div class="title oneoverflow">{{ item.counponsName }}</div>
          <div class="money" v-if="item.counponsType==1"><span class="danwei">¥</span><span class="dazi">{{ item.counponsEnjoyDiscount/100 }}</span></div>
          <div class="money" v-if="item.counponsType==2"><span class="dazi">{{item.counponsDiscount}}</span><span class="danwei">折</span></div>
          <div class="btn" @click.stop="lingqu(item)"></div>
        </div>
      </div>
      <div class="youhuijuanbox" v-else >
        <div class="youhuijuanitem" >
            <div class="title oneoverflow">暂无优惠劵</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState,mapActions } from 'vuex';
import { getcouponslist,receiveCounpons,getOrderCount } from '@/api/index';
export default {
  name: "searchBox",
  computed: {
     ...mapState(['user']),
    isLogin(){
      return this.$store.state.user.customerId?true:false
    },
    timeLabel(){
      const hour = new Date().getHours();
      if ( hour < 12) {
        return '上午';  // 早上      
      }else{
        return '下午';  // 下午
      }
    }
  },
  watch: {
    isLogin(val) {
      if(val){
        this.showlogin=true
        this.init()
      }else{
        this.showlogin=false
      }
      
    }
  },
  data() {
    return {
      
      isStart:false, // 是否开始搜索
      coupslist:[],
      orderObj:null,
      showlogin:false,
    };
  }, 
  
  mounted() {
     this.init()
  },
  methods: {
    ...mapActions(['openLoginDialog','changeCurrentmenu','changeOrderType']),
    loginweb(){
      this.$confirm('确定退出梯语云吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
         this.$store.dispatch('LogOut').then(() => {
          this.showlogin=false
          this.$router.push({ path: '/' })
        })
        this.$message({
          type: 'success',
          message: '退出成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });          
      });
     
    },
    loginit(){
     
       this.openLoginDialog()
    },
    lingqu(item){
      var customerId=this.$store.state.user.customerId
      if(!customerId){
        return this.$message.error('登录后才能领取优惠劵')
      }
      try{
        setTimeout(async ()=>{
          const res =await receiveCounpons({
            counponsId:item.counponsId,
            customerId:customerId,
            deptId:item.deptId,
          })
          // console.log(res)
          if(res.code !=200){
            return this.$message.error(res.msg)
          }
          this.$message.success('领取成功!')
          setTimeout(()=>{
            this.init()
          },1000)
        })
      
      }catch(e){
        //TODO handle the exception
        console.log(e)
        this.$message.error(e.msg)
        setTimeout(()=>{
          this.init()
        },1000)
      }
      
      
    },
    async init(){
      // var customerId = sessionStorage.getItem('customerId')
      const res =await getcouponslist({
        // deptId: this.$appInfo.deptId,
        customerId:this.$store.state.user.customerId
      })
       console.log('sss',res)
      if(res.data&&res.data.length>0){
        this.coupslist=res.data
      }
      const res1=await getOrderCount({
        // deptId:this.$appInfo.deptId,
        customerId:this.$store.state.user.customerId
      })
      // console.log(res1)
      this.orderObj=res1.data
    },
    // 跳转
    gopage(url,curmenu,type){
      console.log(url)
      console.log(this.$router)
      if(curmenu){
        this.changeCurrentmenu(curmenu)
        
      }
      if(type){
        this.changeOrderType(type)
        
      }
      this.$router.push({
        path:url
      })
    }
  },
 
  
};
</script>
<style scoped lang="scss">

.componentsbox{
  width: 100%;
  height: 100%;
  .loginbox{
    width: 100%;
    height: 100%;
    .shangbox{
      width: 100%;
      height: 250px;
      background: #F7F8FC;
      border-radius: 7px 7px 7px 7px;
      margin-bottom: 12px;
      padding: 12px;
      box-sizing: border-box;
      .userInfobox{
        display: flex;
        align-items: center;
        .touxiang{
          width: 60px;
          height: 60px;
          border-radius: 60px;
          overflow: hidden;
          flex: 0 0 auto;
          img{
            width: 100%;
            height: 100%;
          }
        }
        .wenzibox{
          margin-left: 10px;
          .timebox{
            font-weight: 400;
            font-size: 20px;
            color: #000000;
            text-align: left;
            margin-bottom: 22px;
          }
          .regtext{
            font-weight: 400;
            font-size: 14px;
            color: #0672F9;
            line-height: 14px;
            text-align: left;
            cursor: pointer;
          }
          .tuichutext{
            font-weight: 400;
            font-size: 14px;
            color: #000000;
            line-height: 14px;
            text-align: left;
            cursor: pointer;
          }
        }
      }
      .tips1{
        margin-top: 34px;
        font-weight: 400;
        font-size: 20px;
        color: #000000;
        line-height: 24px;
        text-align: center;
        margin-bottom: 8px;
        white-space: nowrap;
      }
      .tips2{
        font-weight: 400;
        font-size: 14px;
        color: #828282;
        line-height: 24px;
        text-align: center;
        margin-bottom: 36px;
        white-space: nowrap;

      }
      .loginbtn{
        width: 204px;
        height: 40px;
        background: #0672F9;
        border-radius: 8px 8px 8px 8px;
        color: #ffffff;
        text-align: center;
      }
      .loginbtn:hover{
        opacity: 0.5;
      }
      .btnsbox{
        margin-top: 12px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        margin-bottom: 14px;
        .btnitem{
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          img{
            width: 26px;
            height: 26px;
          }
          span{
            margin-top: 4px;
            font-weight: 400;
            font-size: 12px;
            color: #4F4F4F;
            text-align: center;
          }
        }
      }
      .orderbox{
        display: flex;
        align-items: center;
        justify-content: space-around;
        margin-bottom: 16px;
        .orderItem{
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          .value{
            font-weight: bold;
            font-size: 20px;
            color: #000000;
            line-height: 20px;
            text-align: center;
          }
          .wenzi{
            font-weight: 400;
            font-size: 12px;
            color: #4F4F4F;
            line-height: 12px;
            text-align: center;
            margin-top: 4px;
          }
        }
      }
      .orderAll{
        margin: 0 8px;
        display: flex;
        height: 24px;
        background: #FFFFFF;
        border-radius: 4px 4px 4px 4px;
        align-items: center;
        justify-content: space-between;
        padding: 0 8px;
        box-sizing: border-box;
        .zuoOrder{
          font-weight: 400;
          font-size: 12px;
          text-align: left;
          .wenzi{
            color: #4F4F4F;
          }
          .shuliang{
            color: #EB5757;
            margin-left: 4px;
          }
        }
        .jiantou{
          width: 24px;
          height: 24px;
          img{
            width: 100%;
            height: 100%;
          }
        }
      }
    }
    .youhuijuanbox{
      width: 100%;
      height: 184px;
      background: #F7F8FC;
      border-radius: 7px 7px 7px 7px;
      overflow-x: auto;
      overflow-y: hidden;
      display: flex;
      white-space: nowrap;
      padding: 0 8px;
      box-sizing: border-box;
      align-items: center;
      .youhuijuanitem{
        background: url('../../../assets/images/youhuijuan.png') no-repeat;
        flex: 0 0 auto; 
        width: 118px;
        height: 151px;
        margin-right: 8px;
        position: relative;
        .title{
          font-weight: 400;
          font-size: 10px;
          color: #BF8650;
          line-height: 30px;
          text-align: center;
        }
        .money{
          margin:0  auto;
           display: flex;
            align-items: center;
            justify-content: center;
          font-weight: bold;
            color: #DB4444;
            text-shadow: inset 1px 2px 3px rgba(0,0,0,0.25);
            text-align: center;
            .danwei{
              align-self: center;
              line-height: 20px;
              font-size: 20px;
            }
            .dazi{
              font-size: 40px;
              margin-left: 6px;
            }
        }
        .btn{
          position: absolute;
          width: 100%;
          height: 60px;
          bottom: 0;
          left: 0;
          
        }
        // img{
        //   width: 100%;
        //   height: 100%;
        // }
      }
    }
  }
}
</style>
